<!--<template>
  <div>安全生产会议</div>
</template>-->

<template>
  <div>
    <div class="model-title-css">
      <div class="title">安全生产会议</div>
    </div>
    <div class="background_wrap">
      <div class="operate_wrap flexDiv">
        <div class="flex-left">
          <el-button type="primary" size="small" class="add buildButtonStyle" @click="showDetailDialog('build')" v-permission="permission.add">
            <i class="iconfont icon-icon_add"></i>&nbsp;新增
          </el-button>
        </div>
        <div class="flex-right">

          <!-- <el-select style="float: none;margin: 0; margin-right:15px;" class="select" size="small"
                     v-model="search.companyId"
                     v-on:change="getProjectByCompanyId()"
                     value-key="id"
                     clearable
                     placeholder="选择公司">
            <el-option
              v-for="item in companyTree"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select> -->
          <el-select class="select" size="small" v-model="search.projectId" v-on:change="getSectionByProjectId()" value-key="id" filterable clearable placeholder="选择项目">
            <el-option v-for="item in projectTree" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>

          <el-select class="select" size="small" v-model="search.sectionId" clearable v-on:change="getList(false)" placeholder="选择标段">
            <el-option v-for="item in sectionTree" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>

          <el-input class="input" v-model="search.titleName" placeholder="请输入标题" clearable @change="getList(true)" />

          <el-button class="search" size="small" @click="getList(true)">
            <i class="iconfont icon-sousuo"></i> 搜索
          </el-button>
        </div>
      </div>
      <div class="list_wrap WholeScroll">
        <el-table class="project-management-info-qinghai auto-flex-table" :border="true" :row-class-name="tableRowStyleName" :cell-class-name="tableCellStyleName" :header-cell-class-name="tableHeaderCellStyleName" :stripe="true" ref="multipleTable" :data="list[0]" tooltip-effect="dark" style="width: 100%; font-family: PingFangSC-Regular; font-size: 14px;" @cell-click="cellClick">
          <el-table-column show-overflow-tooltip label="序号" type="index" width="50">
            <template slot-scope="scope">
              {{ scope.$index + search.pageNo * search.pageSize + 1 }}
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="projectName" label="项目" min-width="110">
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="sectionName" label="标段" min-width="110">
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="titleName" label="标题" min-width="200">
          </el-table-column>

          <el-table-column show-overflow-tooltip prop="remark" label="内容" min-width="300"></el-table-column>
          <el-table-column show-overflow-tooltip prop="createName" label="登记人" width="100"></el-table-column>
          <el-table-column show-overflow-tooltip prop="createTime" label="登记时间" width="170"></el-table-column>

          <el-table-column show-overflow-tooltip label="操作" width="250">
            <template slot-scope="scope">
              <el-button size="mini" class="menu_icon iconfont icon-icon_look action_color1" v-permission="permission.show" @click="handleClickDeal({type:'show',name:'查看',detailId:scope.row.id})">&nbsp;查看</el-button>
              <el-button size="mini" class="menu_icon iconfont icon-xiugai-copy action_color1" v-permission="permission.edit" @click="handleClickDeal({type:'update',name:'修改',detailId:scope.row.id})">&nbsp;修改</el-button>
              <el-button size="mini" class="menu_icon iconfont icon-shanchu action_color2" v-permission="permission.del" @click="handleClickDeal({type:'delete',name:'删除',detailId:scope.row.id})">&nbsp;删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="float: right; margin-top: 30px;" layout="prev, pager, next" :page-size="search.pageSize" :total="search.total" :current-page="search.pageNo + 1" :prev-text="tablePaginationPrev" :next-text="tablePaginationNext" @current-change="paginationChange">
        </el-pagination>
      </div>
    </div>
    <Detail :postDetail="postDetailData" @reloadList="getList(true)"></Detail>
  </div>
</template>

<script>
import {
  tableRowStyleGol,
  tableCellStyleGol,
  tableHeaderCellStyleGol,
  doCreateObject
} from '@/utils/publicFun'
import msgUtil from '@/utils/msgUtil'
import projectSectionInfo from '@/api/buss/common'
import selectProjectAndSection from '@/mixins/selectProjectAndSection'
export default {
  name: 'safetyproducmeet',
  mixins: [selectProjectAndSection],
  components: {
    Detail: require('./safetyproducmeet-detail')
      .default
  },
  data() {
    let permissionBaseCode = "1000114";
    return {
      tableRowStyleName: tableRowStyleGol,
      tableCellStyleName: tableCellStyleGol,
      tableHeaderCellStyleName: tableHeaderCellStyleGol,
      tablePaginationPrev: '上一页',
      tablePaginationNext: '下一页',

      permission: {
        add: ['100', `${permissionBaseCode}:add`],
        show: ['100', `${permissionBaseCode}:show`],
        edit: ['100', `${permissionBaseCode}:edit`],
        del: ['100', `${permissionBaseCode}:del`],
        // listPage: ['100', `${permissionBaseCode}:listPage`],
      },
      search: {
        pageIndex: 0,
        pageNo: 0,
        pageSize: 10,
        total: 0,
        sortField: 'updateTime',
        companyId: '',
        projectId: '',
        sectionId: '',
        titleName: '', // 标题

      }, // 搜索参数
      companyTree: [],
      projectTree: [],
      sectionTree: [],


      list: [
      ],
      postDetailData: {
        show: false,
        type: 'build'
      }
    }
  },
  created() {
    this.initData();

  },
  methods: {
    keydown() {
      if (event.keyCode == 13) {
        this.getList(true)
      }
    },
    initData() {
      projectSectionInfo.getProjSecTreeAll().then(res => {
        if (res.code === 200) {
          this.$set(this, 'projectTree', res.data)
          if (this.$headerSearch) {
            this.$set(this.search, 'projectId', this.changeHeaderProject)
            this.projectTree.forEach((item) => {
              if (item.id === this.search.projectId) {
                this.sectionTree = item.children
              }
            })
            this.getSectionByProjectId()
          }
        } else {
          this.$messageError(res.data.message)
        }
      }).catch(() => {
        this.$messageError('获取项目标段树失败')
      })
    },

    /**
     *  根据建设单位查询下面的所有项目
     * */
    getProjectByCompanyId() {
      if (this.search.projectId) {
        this.search.projectId = ''
      }
      if (this.search.sectionId) {
        this.search.sectionId = ''
      }
      this.companyTree.forEach((item) => {
        if (item.id === this.search.companyId) {
          this.projectTree = item.children
          if (this.projectTree.length > 0) {
            // this.search.projectId = this.projectTree[0].id;
            this.getSectionByProjectId();
          }
        }
      })
    },

    /**
     * 根据项目id获取标段列表
     * getContractByProjectId
     * */
    getSectionByProjectId() {
      this.sectionTree = []
      this.search.sectionId = ''
      if (this.search.projectId) {
        for (let i = 0; i < this.projectTree.length; i++) {
          if (this.projectTree[i].id == this.search.projectId) {
            this.sectionTree = this.projectTree[i].children
            if (this.sectionTree.length == 1) {
              this.search.sectionId = this.sectionTree[0].id
            }
            break;
          }
        }
      }
      this.getList(true)
      // if (this.search.projectId) {
      //   projectSectionInfo.getJlContSecList({ projectId: this.search.projectId }).then(res => {
      //     if (res.code === 200) {
      //       var data = res.data;
      //       this.sectionTree = data;
      //       if (this.sectionTree.length > 0) {
      //         // this.search.sectionId = this.sectionTree[0].id;
      //       } else {
      //         this.search.sectionId = '';
      //       }
      //       this.getList(false)
      //     } else {
      //       msgUtil.error2(res.data.message)
      //     }
      //   })
      // } else {
      //   this.getList(true)
      //   this.search.sectionId = '';
      // }
    },

    // 切换列表
    paginationChange(index) {
      this.search.pageNo = index - 1
      this.getList()
    },

    // 获取列表 api
    getList(reload) {
      if (reload) {
        this.search.pageIndex = 0
      }
      this.list = []
      this.search.sortField = this.$sortName
      this.search.sortOrder = this.$sortType

      this.$httpPost(
        '/buss/safetyproducmeet/paging',
        this.search
      )
        .then((res) => {
          if (res.status === 1) {
            if (res.list.length > 0) {
              this.$set(this.list, this.list.length, res.list);
            }
            this.search.total = res.total;
          } else {
            this.$messageError(res.data.message)
          }
        })
        .catch((res) => {
          console.log('请求出现错误', res)
          this.$messageError(this.$route.name + '请求失败')
        })
    },
    // 事件处理的api请求
    sealDealHttp(url, query, param, callback) {
      this.$httpPost(url + query, param)
        .then((res) => {
          if (res.status === 1) {
            if (callback) callback(res)
            // 重新获取数据
            setTimeout(() => {
              this.getList(true)
            }, 1000)
          } else {
            this.$messageError(res.message)
          }
        })
        .catch((res) => {
          console.log('请求出现错误', res)
          console.log(res)
        })
    },
    // 显示详情弹窗 不同状态
    showDetailDialog(flag, params) {
      console.log(flag, params)
      switch (flag) {
        case 'build':
          this.postDetailData = {
            show: true,
            type: 'build',
            params: params
          }
          break
        case 'update':
          this.postDetailData = {
            show: true,
            type: 'edit',
            params: params
          }
          break
        //查看
        case 'show':
          this.postDetailData = {
            show: true,
            type: 'check',
            params: params
          }
          break
        //文件上传
        case 'upload':
          this.postDetailData = {
            show: true,
            type: 'upload',
            params: params
          }
          break
        case 'history':
          this.postDetailData = {
            show: true,
            type: 'history',
            params: params
          }
          break
        case 'download':
          this.postDetailData = {
            show: true,
            type: 'download',
            params: params
          }
          break
      }
    },
    // 列表的操作流程
    handleClickDeal(res) {
      let type = res.type
      let detailId = res.detailId

      // let name = res.name

      this.boundContractId = detailId
      // console.log(res)
      switch (type) {
        // 查看
        case 'show':
          // 显示详情弹窗
          this.showDetailDialog(type, {
            detailId: detailId,

          })
          break
        // 修改
        case 'update':
          // 显示详情弹窗
          this.showDetailDialog(type, {
            detailId: detailId,
          })
          break
        // 删除
        case 'delete':
          if (detailId === '') {
            this.$messageError('请先选择要删除的记录！')
            return
          }
          this.$confirm('确定是否删除？', '提示', {
            confirmButtonClass: 'iconfont icon-icon_ok',
            cancelButtonClass: 'iconfont icon-icon_cancel',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info'
          })
            .then(() => {
              this.sealDealHttp(
                `/buss/safetyproducmeet/delete`,
                ``,
                {
                  ids: detailId.split(',')
                },
                () => {
                  this.$messageSuccess('删除成功!')
                }
              )
            })
            .catch(() => {
            })
          console.log('请求出现错误')
          break
      }
    },
    // 点击单元格
    cellClick(row, column, cell, event) {
      // console.log(row, column, cell, event)
      console.log(column)
      if (column.property === 'titleName') {
        this.handleClickDeal({
          type: 'show',
          detailId: row.id,
          actions: row.actions
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.top {
  width: 100%;
  height: 40px;
  margin-top: 10px;

  .title {
    float: left;
    font-family: PingFangSC-Regular;
    font-size: 18px;
    font-weight: 600;
  }
}

.operate_wrap {
  width: 100%;

  .select {
    width: 200px;
    margin-right: 15px;
  }

  .input {
    width: 200px;
    margin-right: 15px;
  }

  .search {
    width: 88px;
    color: #fff;
    margin-left: 0 !important;
  }
}

.list_wrap {
  margin-top: 20px;
}

.navigation {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  border-bottom: 1px solid #313e50;
  margin-top: 5px;

  .el-button {
    height: 40px;
    background: #374256;
    border: 1px solid #374256;
    font-family: PingFangSC-Regular;
    border-radius: 5px 5px 0 0;
    min-width: 95px;
    font-size: 14px;
    color: #8190a7;

    &:hover {
      background-color: #f2f2f2;
    }

    &[selected] {
    }
  }

  .el-button + .el-button {
    margin-left: 0;
  }
}
</style>
